<template>
	<view class="content">
		<up-search placeholder="搜索经典" bg-color="#e3e3e3" v-model="keyword"></up-search>
		<up-swiper class="banner" v-if="bannerList.length" :list="bannerList" keyName="image" showTitle radius="8" :autoplay="true" height="160"></up-swiper>
		<up-notice-bar text="YJR	打造的旅游微信小程序"></up-notice-bar>
		
		<view class="list">
			<up-waterfall v-model="flowList" ref="uWaterfailRef">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(itm,idx) in leftList" :key="idx" @click="goDetail(itm)">
						<up-lazy-load threshold="-450" border-radius="10" :image="itm.img" :index="idx"></up-lazy-load>
						<view class="demo-title">
							{{ itm.title }}
						</view>
						
						<view class="demo-price">
							{{ itm.times }}
						</view>
						
						<!-- <view class="demo-tag">
							<view class="demo-tag-itm"  v-for="(item,idx) in itm.tag">
								{{ item }}
							</view>
						</view> -->
						<view class="demo-tag">
							<view class="demo-tag-itm1">
								{{ itm.tag[0] }}
							</view>
							<view class="demo-tag-itm2">
								{{ itm.tag[1] }}
							</view>
						</view>
						
						<view class="isDot" v-if="itm.isDot">
							{{itm.isDot}}
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter" v-for="(itm,idx) in rightList" :key="idx" @click="goDetail(itm)">
						<up-lazy-load threshold="-450" border-radius="10" :image="itm.img" :index="idx"></up-lazy-load>
						<view class="demo-title">
							{{ itm.title }}
						</view>
						
						<view class="demo-price">
							{{ itm.times }}
						</view>
						
						<!-- <view class="demo-tag">
							<view class="demo-tag-itm"  v-for="(item,idx) in itm.tag">
								{{ item }}
							</view>
						</view> -->
						<view class="demo-tag">
							<view class="demo-tag-itm1">
								{{ itm.tag[0] }}
							</view>
							<view class="demo-tag-itm2">
								{{ itm.tag[1] }}
							</view>
						</view>
						
						<view class="isDot" v-if="itm.isDot">
							{{itm.isDot}}
						</view>
					</view>
				</template>
			</up-waterfall>
		</view>
		<view class="topClass" v-if="showBtn" @click="toTop">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
import {onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'
import {getBanner,getHomeList} from '@/api/index.js'
import { ref } from 'vue'

const keyword = ref('')
const bannerList = ref([])
const flowList = ref([])
const showBtn = ref(0)


const goDetail = (item) =>{
	const can = JSON.stringify(item)
	console.log(can)
	console.log(encodeURIComponent(can))
	uni.navigateTo({
		url:`/pages/detail/detail?item=${encodeURIComponent(can)}`
	})
}

const getbanner = async () =>{
	let res = await getBanner()
	
	bannerList.value = res.data.bannerList
	console.log(res.data.bannerList)
}

const gethomeList = async () =>{
	let res = await getHomeList()
	flowList.value = res.data
	console.log(res.data)
}
onReachBottom(() =>{
	setTimeout(() =>{
		addRandomData()
	},1000)
})

onPageScroll((e) =>{
	console.log(e.scrollTop)
	if(e.scrollTop > 600){
		showBtn.value = 1
	}else{
		showBtn.value = 0
	}
})

const toTop = () =>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:300
	})
}

const addRandomData = () =>{
	for(let i = 0; i<10; i++){
		let index = uni.$u.random(0,flowList.value.length-1)
		let item = JSON.parse(JSON.stringify(flowList.value[index]))
		item.id = uni.$u.guid()
		flowList.value.push(item)
	}
}
onLoad( async ()=>{
	getbanner()
	gethomeList()
})
</script>

<style>
	page{
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.content{
		padding: 20rpx 20rpx;
		.banner{
			margin: 20rpx 0;
		}
	}
	.list ::v-deep .up-waterfall__right {
	  min-height: 1px; /* 确保右列容器存在 */
	}

	
	.list{
		margin: 30rpx 0;
		.demo-warter{
			margin: 10rpx 10rpx 10rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			position: relative;
		}
		.demo-title{
			font-size: 30rpx;
			margin-top: 10rpx;
			color: #303133;
		}
		.demo-price{
			font-size: 24rpx;
			color: #777;
			margin-top: 10rpx;
		}
		.demo-tag{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			// .demo-tag-itm{
			// 	padding: 0 5rpx;
			// }
			.demo-tag-itm1{
				border: 1px solid rgb(252, 163, 129);
				color: #ffaa00;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
			}
			.demo-tag-itm2{
				border: 1px solid #00aaff;
				color: #00aaff;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
			}
		}
		.isDot{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 24rpx;
			color: #fff;
			line-height: 32rpx;
			background-color: #ff0000;
			text-align: center;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
		}
	}
	
	.topClass{
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: rgb(0, 0, 0, 0.5);
		padding: 20rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>
